<template>
  <div id="actor-list">
    <div style="padding:5px">
      <header>
        <div class="inner-left">

          <!-- <el-input size="medium"
                    placeholder="关键字"
                    style="margin:0 5px;"
                    v-model="searchText"></el-input>
          <el-button-group style="display:flex">
            <el-button icon="el-icon-search"
                       style="padding: 10px 12px;"
                       size="medium">搜索</el-button>
            <el-button icon="el-icon-arrow-down"
                       style="padding: 10px 12px;"
                       size="medium"></el-button>
          </el-button-group> -->
        </div>
        <!-- <el-button-group>
          <el-button icon="el-icon-edit"
                     style="padding: 10px 12px;"
                     size="medium">导入</el-button>
          <el-button icon="el-icon-share"
                     style="padding: 10px 12px;"
                     size="medium">导出</el-button>
        </el-button-group> -->
        <!-- <batchTag :number="selections.length"
                  @delete="handleDelete"></batchTag> -->
      </header>
      <main>
        <el-table :data="tableData"
                  header-cell-class-name="table-header"
                  border
                  @selection-change="handleSelectionChange"
                  style="width: 100%">
          <el-table-column type="selection"
                           align="center"
                           width="55">
          </el-table-column>
          <el-table-column type="index"
                           show-overflow-tooltip
                           align="center"
                           label="序号"
                           width="80">
          </el-table-column>
          <!-- <el-table-column prop="type"
                           sortable
                           align="center"
                           width="100"
                           label="类型">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-select v-model="addObj.type"
                           style="width:100%;">
                  <el-option label="篇章"
                             value="篇章"></el-option>
                  <el-option label="节目"
                             value="节目"></el-option>
                </el-select>
              </div>
              <span v-else>{{scope.row.type}}</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="name"
                           show-overflow-tooltip
                           align="center"
                           sortable
                           label="名称">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-input v-model="addObj.name" />
              </div>
              <span v-else>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address"
                           show-overflow-tooltip
                           sortable
                           align="center"
                           label="简介">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-input v-model="addObj.introduction" />
              </div>
              <span v-else>{{scope.row.introduction}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address"
                           show-overflow-tooltip
                           align="center"
                           label="人员名单">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-input v-model="addObj.extraActor" />
              </div>
              <span v-else>{{scope.row.extraActor}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           width="100"
                           label="操作">
            <template slot-scope="scope">
              <span v-if="scope.row.editRow && tabEdit">
                <el-button type="text"
                           size="mini"
                           @click="handleSave">保存</el-button>
                <el-button size="mini"
                           type="text"
                           @click="handleCancel">取消</el-button>
              </span>
              <el-button v-else
                         type="text"
                         @click="handleEdit(scope.row,'篇章')">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </main>
      <footer>
        <el-button type="primary"
                   size="small"
                   icon="el-icon-plus"
                   @click="handleAdd">新增</el-button>
        <el-button type="danger"
                   :disabled="selections.length===0"
                   size="small"
                   icon="el-icon-delete"
                   @click="handleDelete">删除</el-button>
      </footer>
    </div>

    <el-dialog title="篇章新增/编辑"
               width="500px"
               :visible.sync="visible">
      <el-form label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="addObj.name"></el-input>
        </el-form-item>
        <!-- <el-form-item label="类型">
          <el-select v-model="addObj.type"
                     style="width:100%;">
            <el-option label="篇章"
                       value="篇章"></el-option>
            <el-option label="节目"
                       value="节目"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="时长">
          <el-input v-model="addObj.lenth"
                    maxlength="3"
                    oninput="if(isNaN(parseInt(value)))value=value.slice(0,0)"
                    placeholder="请输入整数分钟">
            <i slot="suffix">分钟</i></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3 }"
                    v-model="addObj.introduction"></el-input>
        </el-form-item>
        <el-form-item label="人员名单">
          <el-input type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3 }"
                    v-model="addObj.extraActor"></el-input>
        </el-form-item>

        <div v-if="(0 === extraArray.length)"
             style="text-align:center">
          <el-button icon="el-icon-plus"
                     @click="addItem" />
        </div>
        <div style="margin-bottom:22px"
             v-for="(item,i) in extraArray"
             :key="item.id">
          <el-input style="width:80px;"
                    v-model="item.name"></el-input>
          <el-input style="width:calc(100% - 200px)"
                    v-model="item.value"></el-input>
          <el-button-group>
            <el-button icon="el-icon-plus"
                       v-if="i === extraArray.length-1"
                       @click="addItem"></el-button>
            <el-button icon="el-icon-minus"
                       @click="deleteItem(i)"></el-button>
          </el-button-group>
        </div>
        <el-row style="text-align:right">
          <el-button size="small"
                     @click="handleSubmit"
                     type="primary">提交</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import mixin from './mixin/mixin'
import API from '../../../api/show'

export default {
  name: 'ComplexList',
  mixins: [mixin],
  props: {
    display: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => ([])
    },
    node: {
      default: () => ({}),
      type: Object
    }
  },
  data() {
    return {
      addObj: {
        name: '',
        type: '篇章',
        typeCode: 15,
        introduction: '',
        extraActor: ''
      },
      extraArray: [
        {
          id: this.guid(),
          name: '',
          value: ''
        }
      ]
    }
  },
  methods: {
    guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        const r = Math.random() * 16 | 0
        const v = c === 'x' ? r : (r & 0x3 | 0x8)
        return v.toString(16);
      });
    },
    addItem() {
      const uuid = this.guid()
      this.extraArray.push({ id: uuid, name: '', value: '' })
    },
    deleteItem(i) {
      this.extraArray.splice(i, 1)
    },
    handleSubmit() {
      // const newChild = { id: id++, label: this.addObj.name, children: [], type: this.addObj.type };
      // if (!this.chosenData.children) {
      //   this.$set(this.chosenData, 'children', []);
      // }
      // this.chosenData.children.push(newChild);
      this.visible = false
      // this.addObj.name = ''
      // this.addObj.type = '篇章'
      // this.addObj.des = ''
    },
    submitProgram() {
      const param = {
        playId: this.node.nodeId,
        ...this.addObj
      }
      API.saveProgramByNodeId(param).then(res => {
        this.$parent.queryComplexByNodeID({ data: { id: this.node.nodeId } })
        this.$parent.queryById()
      })
    },
    delete() {
      const param = {
        id: this.selections.map(s => s.id).join(','),
        ...this.node
      }
      API.deleteSections(param).then(res => {
        this.$parent.queryComplexByNodeID({ data: { id: this.node.nodeId } })
        this.$parent.queryById()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#actor-list {
  width: 100%;
  height: 100%;
  @import "./scss/common.scss";
}
</style>
